<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<div data-role="page" id="list_page">
    <div data-role="panel" id="mypanel" data-position="right" data-display="overlay" data-position-fixed="true">
        <ul data-role="listview" data-icon="false">
            <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
            <li data-icon="edit"><a href="javascript:jQuery.mobile.changePage('zHibogo.do?method=form', {type:'post', transition: 'slide'});">New</a></li>
            <li data-icon="eye"><a href="javascript:jQuery.mobile.changePage('zHibogo.do?method=form', {type:'post', transition: 'slide'});">History</a></li>
            <li data-role="list-divider">Option</li>
            <li data-icon="gear"><a href="javascript:jQuery.mobile.changePage('setting.do?method=form', {type:'post', transition: 'pop', role: 'dialog'});">Setting</a></li>
            <li data-role="collapsible" data-inset="false" data-iconpos="right">
              <h3>User</h3>
              <ul data-role="listview">
                <li data-icon="user"><a href="javascript:jQuery.mobile.changePage('user.do?method=userCreateForm', {type:'post', transition: 'pop', role: 'dialog'});">&nbsp;&nbsp;User Create</a></li>
                <li data-icon="info"><a href="javascript:jQuery.mobile.changePage('user.do?method=userForm', {type:'post', transition: 'pop', role: 'dialog', data:{login_id:'<c:out value="${ZHIBOGO_SESSION.id}"/>'}});">&nbsp;&nbsp;My Info</a></li>
              </ul>
            </li>
            <li data-icon="power"><a href="javascript:jQuery.mobile.changePage('login.do?method=logout', {type:'post', transition: 'flip', reverse: true});">Logout</a></li>
        </ul>
    </div><!-- /panel -->
    <div data-role="header">
        <h1>ZHibogo</h1>
        <a href="#mypanel" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
    </div>
    
    <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="true">
            <c:forEach var="data" items="${list}">
                <li><a href="javascript:jQuery.mobile.changePage('zHibogo.do?method=detail', {type:'post', transition: 'slide', data:{id:'<c:out value="${data.id}"/>'}});"><c:out value="${data.keyword}"/></a></li>
            </c:forEach>
        </ul>
    </div>
</div>